<template>
  <wd-col-picker
    :label="title"
    :placeholder="placeholder"
    v-model="value"
    auto-complete
    :column-change="columnChange"
    :display-format="displayFormat"
    @confirm="handleConfirm"
    :custom-class="cusClass"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import areaData from './area.json'
const props = defineProps({
  cusClass: String,
  title: String,
  placeholder: {
    type: String,
    default: '请选择',
  },
  modelValue: {
    type: Array, // ['110000','110100'],
    default: () => [],
  },
  format: String, // 显示格式,中间符号 '-''/'
})

const value = ref(props.modelValue)

const columnChange = ({ selectedItem, resolve, finish, index }) => {
  const value = index === -1 ? 86 : selectedItem.value
  if (areaData[value]) {
    resolve(
      Object.keys(areaData[value]).map((key) => {
        return {
          value: key,
          label: areaData[value][key],
        }
      }),
    )
  } else {
    finish()
  }
}
const emits = defineEmits(['change'])

const displayFormat = (items) => {
  return items
    .map((item) => {
      return item.label
    })
    .join('-')
}

const handleConfirm = (v) => {
  // 返回最后选择的数组结果[v,v,v]
  emits('change', v)
}
</script>
